<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
	       div{
					width:350px;
					height: 150px;
					border: 1px solid;
					overflow: hidden;
				}
				.ul li{
					width: 300px;
					height: 38px;
				}
				.ul {
					height:220px;
					position:relative;
					transition: all 2s;
					animation:aaa 15s infinite 2s running;
				}
				@keyframes aaa {
					0% {
					transform:translatey(0px);
				}
				15% {
					transform:translatey(-38px);
				}
				25% {
					transform:translateY(-72px);
				}
				50% {
					transform:translateY(-120px);
				}
				75% {
					transform:translateY(-220px);
				}
				100% {
					transform:translateY(-400px);
				}
				}
				.ul:hover {
					animation-play-state:paused;
					cursor:pointer;
				}
				</style>

	<body>
		
		<div>
					<ul class="ul">
						<li>11111111111111111111111111111</li>
						<li>22222222222222222222222222222</li>
						<li>33333333333333333333333333333</li>
						<li>44444444444444444444444444444</li>
						<li>555555555555555555555555555555</li>
						<li>666666666666666666666666666666</li>
						<li>11111111111111111111111111111</li>
						<li>22222222222222222222222222222</li>
						<li>33333333333333333333333333333</li>
						<li>44444444444444444444444444444</li>
						<li>555555555555555555555555555555</li>
						<li>666666666666666666666666666666</li>
						<li>11111111111111111111111111111</li>
						<li>22222222222222222222222222222</li>
						<li>33333333333333333333333333333</li>
						<li>44444444444444444444444444444</li>
						<li>555555555555555555555555555555</li>
						<li>666666666666666666666666666666</li>
						<li>11111111111111111111111111111</li>
						<li>22222222222222222222222222222</li>
						<li>33333333333333333333333333333</li>
						<li>44444444444444444444444444444</li>
						<li>555555555555555555555555555555</li>
						<li>666666666666666666666666666666</li>
					</ul>

	</body>
</html>
